@import './color.scss';
@import './var.scss';

.full {
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 0;
  right: 0;
  overflow: auto;
}

.transition {
  transition: all .1s;
}

.unselect {
  user-select: none;
  cursor: pointer;
}

.radius1 { border-radius: 1px; }
.radius2 { border-radius: 2px; }
.radius4 { border-radius: 4px; }

.nowrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.shadow {
  box-shadow:
    0 2px 5px 0 rgba(0, 0, 0, 0.04),
    0 4px 10px 0 rgba(0, 0, 0, 0.02);
}

.card {
  @extend .radius2;
  @extend .shadow;
  background-color: #FFF;
}

// 边距相关
$sizes: (0, 5px, 10px, 15px, 20px);
$sizes-name: (0, 5, 10, 15, 20);

@for $index from 1 to 6 {
  .is-m-#{nth($sizes-name, $index)} { margin: #{nth($sizes, $index)} !important; }
  .is-mt-#{nth($sizes-name, $index)} { margin-top: #{nth($sizes, $index)} !important; }
  .is-mr-#{nth($sizes-name, $index)} { margin-right: #{nth($sizes, $index)} !important; }
  .is-mb-#{nth($sizes-name, $index)} { margin-bottom: #{nth($sizes, $index)} !important; }
  .is-ml-#{nth($sizes-name, $index)} { margin-left: #{nth($sizes, $index)} !important; }

  .is-p-#{nth($sizes-name, $index)} { padding: #{nth($sizes, $index)} !important; }
  .is-pt-#{nth($sizes-name, $index)} { padding-top: #{nth($sizes, $index)} !important; }
  .is-pr-#{nth($sizes-name, $index)} { padding-right: #{nth($sizes, $index)} !important; }
  .is-pb-#{nth($sizes-name, $index)} { padding-bottom: #{nth($sizes, $index)} !important; }
  .is-pl-#{nth($sizes-name, $index)} { padding-left: #{nth($sizes, $index)} !important; }
}

// 过渡动画
.fade-progress-leave-active,
.fade-progress-enter-active {
  transition: all 0.3s;
}
.fade-progress-enter {
  opacity: 0;
  transform: translateY(10px);
}
.fade-progress-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

// 过渡动画
.fade-router-leave-active,
.fade-router-enter-active {
  transition: all .2s;
}
.fade-router-enter {
  opacity: 0;
}
.fade-router-leave-to {
  opacity: 0;
}
